<template>
    <div>
        <!-- 按钮触发弹窗 -->
        <el-button type="primary" @click="newBookDialog = true">新增图书</el-button>

        <!-- 新增图书的弹窗 -->
        <el-dialog title="新增图书" v-model="newBookDialog" width="50%">
            <el-form :model="newBook">
                <el-form-item label="书名" :label-width="formLabelWidth">
                    <el-input v-model="newBook.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="作者" :label-width="formLabelWidth">
                    <el-input v-model="newBook.author" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="ISBN" :label-width="formLabelWidth">
                    <el-input v-model="newBook.isbn" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="出版社" :label-width="formLabelWidth">
                    <el-input v-model="newBook.publisher" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="出版日期" :label-width="formLabelWidth">
                    <el-date-picker v-model="newBook.publishDate" type="date" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="分类" :label-width="formLabelWidth">
                    <el-input v-model="newBook.category" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="库存" :label-width="formLabelWidth">
                    <el-input-number v-model="newBook.stock" :min="0"></el-input-number>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="newBookDialog = false">取消</el-button>
                    <el-button type="primary" @click="addBook">确定</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 图书列表 -->
        <el-table :data="books" style="width: 100%; margin-top: 20px;">
            <el-table-column prop="Title" label="书名" width="180"></el-table-column>
            <el-table-column prop="Author" label="作者" width="180"></el-table-column>
            <el-table-column prop="Isbn" label="ISBN" width="180"></el-table-column>
            <el-table-column prop="Publisher" label="出版社" width="180"></el-table-column>
            <el-table-column prop="PublishDate" label="出版日期" width="180"></el-table-column>
            <el-table-column prop="Category" label="分类" width="180"></el-table-column>
            <el-table-column prop="Stock" label="库存" width="180"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" @click="handleDelete(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination layout="prev, pager, next" :total="bookCount" />
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import api from "@/api";

// 新增图书的弹窗状态
const newBookDialog = ref(false);

// 新增图书的表单数据
const newBook = ref({
    title: '',
    author: '',
    isbn: '',
    publisher: '',
    publishDate: '',
    category: '',
    stock: 0
});

// 表单标签宽度
const formLabelWidth = '120px';

// 新增图书
async function addBook() {
    // 这里可以添加新增图书的逻辑
const bookCount = ref(0);
// 模拟图书列表数据
const books = ref([]);

// 模拟获取图书列表的方法
async function getBookList() {
    const result = await api.book.bookList();
    console.log(result, "result")
    if(result.code === 200){
        books.value = result.data.list;
        bookCount.value = result.data.total;

    }
}

// 在组件挂载后调用 getBookList 方法
onMounted(() => {
    console.log("Component has been mounted.");
    getBookList();
});

// 编辑和删除方法（仅作示例）
function handleEdit(row) {
    console.log('编辑:', row);
    // 这里可以添加编辑逻辑
}

function handleDelete(index) {
    console.log('删除:', index);
    // 这里可以添加删除逻辑
}
</script>

<style scoped>
.book-list {
    padding: 20px;
}
</style>